<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@ taglib prefix="fmt" uri="jakarta.tags.fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>HiLover - 记录爱情故事</title>
    <jsp:include page="common/head.jsp"/>
</head>
<body>
    <jsp:include page="common/header.jsp"/>
    
    <main class="main">
        <!-- 热门情侣 -->
        <section class="section">
            <h2>热门情侣</h2>
            <div class="couple-grid">
                <c:forEach items="${topCouples}" var="couple">
                    <div class="couple-card">
                        <a href="/couples/${couple.id}">
                            <div class="couple-avatars">
                                <img src="${couple.lover1Avatar}" alt="${couple.lover1Name}">
                                <img src="${couple.lover2Avatar}" alt="${couple.lover2Name}">
                            </div>
                            <div class="couple-info">
                                <h3>${couple.lover1Name} & ${couple.lover2Name}</h3>
                                <p>在一起 ${couple.daysTogether} 天</p>
                                <p>❤️ ${couple.likes}</p>
                            </div>
                        </a>
                    </div>
                </c:forEach>
            </div>
        </section>

        <!-- 随机情侣 -->
        <section class="section">
            <h2>发现情侣</h2>
            <div class="couple-grid">
                <c:forEach items="${randomCouples}" var="couple">
                    <div class="couple-card">
                        <a href="/couples/${couple.id}">
                            <div class="couple-avatars">
                                <img src="${couple.lover1Avatar}" alt="${couple.lover1Name}">
                                <img src="${couple.lover2Avatar}" alt="${couple.lover2Name}">
                            </div>
                            <div class="couple-info">
                                <h3>${couple.lover1Name} & ${couple.lover2Name}</h3>
                                <p>在一起 ${couple.daysTogether} 天</p>
                                <p>❤️ ${couple.likes}</p>
                            </div>
                        </a>
                    </div>
                </c:forEach>
            </div>
        </section>

        <!-- 随机名言 -->
        <section class="section quote-section">
            <div class="quote">
                <p>${quote.content}</p>
                <cite>— ${quote.author}</cite>
            </div>
        </section>
    </main>
    
    <jsp:include page="common/footer.jsp"/>
    <script src="/static/js/index.js"></script>
</body>
</html> 